﻿<style>
.myButton {
	-moz-box-shadow: 3px 4px 6px -2px #276873;
	-webkit-box-shadow: 3px 4px 6px -2px #276873;
	box-shadow: 3px 4px 6px -2px #276873;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #24e3d3), color-stop(1, #0f7d6b));
	background:-moz-linear-gradient(top, #24e3d3 5%, #0f7d6b 100%);
	background:-webkit-linear-gradient(top, #24e3d3 5%, #0f7d6b 100%);
	background:-o-linear-gradient(top, #24e3d3 5%, #0f7d6b 100%);
	background:-ms-linear-gradient(top, #24e3d3 5%, #0f7d6b 100%);
	background:linear-gradient(to bottom, #24e3d3 5%, #0f7d6b 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#24e3d3', endColorstr='#0f7d6b',GradientType=0);
	background-color:#24e3d3;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	border:1px solid #298f8a;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Verdana;
	font-size:20px;
	padding:7px 22px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
	margin-top: 1cm;;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    height: 10%;
    background-color: #b0e0e6;
}
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0f7d6b), color-stop(1, #24e3d3));
	background:-moz-linear-gradient(top, #0f7d6b 5%, #24e3d3 100%);
	background:-webkit-linear-gradient(top, #0f7d6b 5%, #24e3d3 100%);
	background:-o-linear-gradient(top, #0f7d6b 5%, #24e3d3 100%);
	background:-ms-linear-gradient(top, #0f7d6b 5%, #24e3d3 100%);
	background:linear-gradient(to bottom, #0f7d6b 5%, #24e3d3 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f7d6b', endColorstr='#24e3d3',GradientType=0);
	background-color:#0f7d6b;
}
.myButton:active {
	position:relative;
	top:1px;
}
span{
    display:inline-block;
}

</style>
	<!DOCTYPE>

	<head>
		<meta charset="UTF-8">
		<title>Home Page</title>
		<link rel="stylesheet" href="/css/stylesheet.css">
		<link rel="stylesheet" href="/css/bootstrap.css">
		<link rel="stylesheet" href="/css/bootstrap-social.css">
		<link rel="stylesheet" href="/css/font-awesome.css">	
		<script src="/js/jquery.min.js"></script>
		<script type="text/javascript" src="/js/facebook.js"></script>
	  	<script type="text/javascript" src="/js/render.js"></script>
	</head>
	<body class="body">
		<script src="http://d3js.org/d3.v3.min.js"></script>
		
		
		<div id="communitiesBar">
			<nav>
				<!-- Pulsanti Facebook -->
				
			<span style="width:46%;margin-top:2cm"></span>
				<button id="facebook_login_button" class="btn btn-social-icon btn-lg btn-facebook" style="display:inline-block;width: 7%;height: 8%;"onclick="FB_login()">
				<i class="fa fa-facebook"></i>
				</button>
			<span style="width:46%"></span>


				<button id="facebook_logout_button" class="myButton" style="display:none;margin-top: 1cm;" onclick="FB_logout()">Logout FB</button> 
		
			</nav>
		</div>
	  	<div id="fb-root"></div>
		
    
		<button id="getFriendPost_button" class="myButton" style="display:none" onclick="getFriendsPosts()" hidden="true">Get friends and posts</button> 

        <form method="post" action="/fbinfo">
            <input type="hidden" name="field5" id="users">
            <input type="hidden" name="field6" id="posts">
			<input id="printfile" class="myButton" style="display:none" type="submit" value="Print files" hidden="true"> 

			<span style="width:34.6%"></span>           
			<span style="width:34.6%"></span>
		</form>
        <script type="text/javascript"> 	
            document.getElementById('users').value;
            document.getElementById('posts').value;
        </script>
	</body>